<template>
    <el-card style="height:70px">
        <el-form ref="form" label-width="80px" inline label-position="left" class="query-form">
            <el-form-item label="用户账号:">
                <el-input placeholder="请输入用户账号" v-model="keyWord" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" :disabled="keyWord ? false : true"
                    @click="search">搜索</el-button>
                <el-button type="danger" icon="Refresh" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card style="margin: 10px 0px;">
        <el-button type="primary" icon="Plus">添加职位</el-button>
        <el-button type="danger" icon="Delete">批量删除</el-button>
        <el-table :data="[1, 2, 3, 4]" style="width: 100%;margin: 10px 0px;" border>
            <el-table-column width="50px" type="selection" align="center" fixed></el-table-column>
            <el-table-column width="80px" type="index" align="center" label="序号"></el-table-column>
            <el-table-column width="200px" align="center" label="ID"></el-table-column>
            <el-table-column align="center" label="职位名称"></el-table-column>
            <el-table-column align="center" label="创建时间"></el-table-column>
            <el-table-column align="center" label="更新时间"></el-table-column>
            <el-table-column align="center" label="操作">
                <template #="{ row, $index }">
                    <el-button type="primary" size="small">分配权限</el-button>
                    <el-button type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
    import { ref } from 'vue';

    const keyWord = ref<string>('')

    const search = () => {
        console.log('search')
    }

    const reset = () => {
        console.log('reset')
    }
</script>

<style scoped lang="scss">
    .query-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>